<template>
  <div class="divStyle">
    <div class="treeStyle">
      <div>
        <el-tree
          style="max-width: 600px"
          :data="treeList"
          default-expanded-keys="6E746ED0-12E9-4002-9887-D84A19142304"
          :highlight-current="true"
          :expand-on-click-node="false"
          :check-strictly="true"
          @node-click="handleClick"
          v-loading="treeLoading"
          :current-node-key="defaultSelectKey"
          node-key="key"
        >
          <template #default="{ node, data }">
            <div class="custom-node">
              <el-icon v-if="data.nodeType !== nodeTypeEnum.button"
                ><component class="icons" :is="data.icon"></component
              ></el-icon>
              <span v-if="data.nodeType === nodeTypeEnum.button"
                >&nbsp;
                <buttonStyleLayout
                  :modelData="data.extendData"
                  :buttonName="data.extendData.buttonName"
                ></buttonStyleLayout>
              </span>
              <span v-else>&nbsp;{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="userStyle">
      <el-row class="rowNavStyle">
        <el-col :span="24" class="colNavStyle">
          <menuButton
            @addMenuButtonKey="addClick"
            helper-path="pages/03e2a6"
          ></menuButton>
          <div
            style="
              margin-left: auto;
              margin-right: 10px;
              display: flex;
              color: red;
            "
          >
            <el-icon style="color: #67c23a; font-size: 22px"
              ><ChatLineRound /></el-icon
            ><span class="blink-text">表格数据列较多，可以左右移动表格</span>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        stripe
        :border="true"
        row-key="buttonId"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        <!-- 动态列 -->
        <el-table-column
          show-overflow-tooltip
          v-for="itme in columns"
          :key="itme.fieldEnName"
          :prop="itme.fieldEnName"
          :label="itme.fieldCnName"
          :min-width="itme.fieldWidth"
          :sortable="itme.fieldSortable"
          :align="itme.fieldAlign"
        >
          <template v-if="itme.fieldSlot === 'yl'" #default="yl">
            <buttonStyleLayout
              :modelData="yl.row"
              :buttonName="yl.row.buttonName"
            ></buttonStyleLayout>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="yl" label="按钮预览" width="200">
          <template #default="model">
            <buttonStyleLayout
              :modelData="model.row"
              :buttonName="model.row.buttonName"
            ></buttonStyleLayout>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <!-- <el-button
              size="small"
              icon="Edit"
              plain
              type="primary"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button> -->
            <dataRowButton
              :model="scope.row"
              @editButtonKey="handleEdit(scope.row)"
            ></dataRowButton>
          </template>
        </el-table-column>
      </el-table>
      <pageLayout :pageData="page" @pageBnt="pageClick"></pageLayout>
    </div>
  </div>
  <addOrEdit
    :isVisibles="isVisibles"
    :modelData="buttonModel"
    :dialogTitle="dialogTitle"
    @closeBnt="colosDialog"
  ></addOrEdit>
</template>
  <script lang="ts" setup>
import { deleteById } from "@/api/department";
import { treeExtendOutPut } from "@/model/public/treeModel";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { basePageModel, pageCofing } from "@/model/public/public";
import addOrEdit from "../button/addOrEdit.vue";
import { SysDepartment } from "@/model/department/department";
import { getAllButtonList, getButtonList } from "@/api/button";
import { nodeTypeEnum } from "@/enum/public";
import pageLayout from "../../components/page.vue";
import { SysButton, SysButtonDataOutPut } from "@/model/button/button";
import buttonStyleLayout from "@/components/buttonStyle.vue";
import menuButton from "@/components/menuButton.vue";
import dataRowButton from "@/components/dataRowButton.vue";
import { useUserStore } from "@/store/user";
import { GetMenuColsByMenuId } from "@/api/publicTool";
//初始加载dom
onMounted(() => {
  getAllButtonListMsg();
  GetMenuColsByMenuIdMsg();
});
//等待加载
const loading = ref(true);
//定义列
const columns = ref();
const treeLoading = ref(true);
const userStore = useUserStore();
//table数据
const tableData = ref<SysButtonDataOutPut[]>([]);
//点击树形节点值
const checkedKeys2 = ref<SysDepartment[]>([]);
//默认选择节点
const defaultSelectKey = ref<string>(userStore.corporationKey);
//控制弹出层显隐
const isVisibles = ref<boolean>(false);
//弹出层标题
const dialogTitle = ref<string>();
//当前选中节点
const currentSelectNode = ref<treeExtendOutPut>({
  key: "",
  pKey: "",
  corporationKey: "",
  systemKey: "",
  label: "",
  sort: 0,
  disabled: false,
  isLeaf: false,
  icon: "",
  nodeType: 0,
  children: [],
  extendData: undefined,
});

//按钮模型数据
const buttonModel = reactive<SysButton>({
  ButtonId: "",
  MenuId: "",
  ButtonRoleType: 1,
  ButtonStyleId: "",
  ButtonName: "",
  ButtonKey: "",
  RuleId: "",
  OrderBy: 1,
  CorporationKey: "",
  SystemKey: "",
});

//查询条件
const searchFilter = reactive<any>({
  CorporationKey: userStore.corporationKey,
  SystemKey: "",
  MenuId: "",
  ButtonId: "",
});

//分页
const page = reactive<basePageModel>({
  currentPage: pageCofing.currentPage,
  pageSize: 13,
  total: pageCofing.total,
});

//tree数据
const treeList = ref<treeExtendOutPut[]>([]);
const getAllButtonListMsg = function () {
  getAllButtonList()
    .then(({ data, code, msg }) => {
      if (code == 200) {
        treeList.value = data;
      }
      treeLoading.value = false;
    })
    .catch(() => {
      treeLoading.value = false;
    });
};

//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 1) {
    getButtonListMsg();
  } else {
    columns.value = [];
  }
};

//获取按钮数据
const getButtonListMsg = async () => {
  getButtonList({
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    filterJson: JSON.stringify(searchFilter),
  })
    .then(({ data, code, total }) => {
      if (code == 200) {
        tableData.value = data;
        page.total = total;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

//树点击事件
function handleClick(node: treeExtendOutPut) {
  currentSelectNode.value = node;
  searchFilter.CorporationKey = "";
  searchFilter.SystemKey = "";
  searchFilter.MenuId = "";
  searchFilter.ButtonId = "";
  if (node.nodeType === nodeTypeEnum.corporation) {
    searchFilter.CorporationKey = node.key;
  }
  if (node.nodeType === nodeTypeEnum.system) {
    searchFilter.SystemKey = node.key;
  }
  if (node.nodeType === nodeTypeEnum.menu) {
    searchFilter.MenuId = node.key;
  }
  if (node.nodeType === nodeTypeEnum.button) {
    searchFilter.ButtonId = node.key;
  }
  getButtonListMsg();
}

//新增
const addClick = function () {
  const model = ref<SysButtonDataOutPut[]>([]);
  addOrEditMethod(model.value[0], true);
};

//行编辑事件
const handleEdit = function (model: SysButtonDataOutPut) {
  addOrEditMethod(model, false);
};

//新增或编辑方法
const addOrEditMethod = function (model: SysButtonDataOutPut, isAdd: boolean) {
  if (isAdd) {
    buttonModel.ButtonId = "";
    buttonModel.ButtonKey = "";
    buttonModel.ButtonName = "";
    buttonModel.ButtonStyleId = "";
    buttonModel.CorporationKey = "";
    buttonModel.SystemKey = "";
    buttonModel.MenuId = "";
    buttonModel.OrderBy = 1;
    buttonModel.ButtonRoleType = 1;
    buttonModel.RuleId = "";
  } else {
    buttonModel.ButtonId = model.buttonId;
    buttonModel.ButtonKey = model.buttonKey;
    buttonModel.ButtonName = model.buttonName;
    buttonModel.ButtonStyleId = model.buttonStyleId;
    buttonModel.CorporationKey = model.corporationKey;
    buttonModel.SystemKey = model.systemKey;
    buttonModel.MenuId = model.menuId;
    buttonModel.OrderBy = parseInt(model.orderBy);
    buttonModel.ButtonRoleType = model.buttonRoleType;
    buttonModel.RuleId = model.ruleId;
  }
  dialogTitle.value = isAdd ? "新增按钮" : "编辑按钮";
  isVisibles.value = true;
};

//删除
const deleteClick = function () {
  if (checkedKeys2.value.length == 0) {
    ElMessage({
      message: "请选择部门进行编辑",
      type: "warning",
    });
  } else if (checkedKeys2.value.length > 1) {
    ElMessage({
      message: "只能选择一条数据进行编辑",
      type: "warning",
    });
  } else {
    var title =
      "你确定要删除部门[" + checkedKeys2.value[0].DepartmentName + "]吗？";
    ElMessageBox.confirm(title, "提示消息", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        deleteById({
          id: checkedKeys2.value[0]?.Id,
        }).then(({ code, msg }) => {
          if (code == 200) {
            ElMessage({
              message: msg,
              type: "success",
            });
            getAllButtonListMsg();
          }
        });
      })
      .catch(() => {
        //取消
      });
  }
};

//关闭弹出层
const colosDialog = function () {
  getAllButtonListMsg();
  getButtonListMsg();
  checkedKeys2.value = [];
  isVisibles.value = false;
};

//分页点击事件
const pageClick = function (basePageModel: basePageModel) {
  page.currentPage = basePageModel.currentPage;
  page.pageSize = basePageModel.pageSize;
  getButtonListMsg();
};
</script>
  <style scoped>
.divStyle {
  display: flex;
}
.treeStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
  width: 400px;
  height: 85vh;
  overflow-y: auto;
}
.treeTop {
  height: 50px;
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
  padding-left: 20px;
  align-items: center;
  display: flex;
}
.userStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
  margin-left: 3px;
  width: 100%;
  height: 85vh;
  overflow-y: auto;
}
.rowStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
}
.colStyle {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
}
</style>